<!--
 作者：ex_wangshuai
 日期：2016-10-08
 功能：首页顶部轮播
 参数：
 事件：
-->
<template>
  <div class="banner">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"
             v-for="img in images" track-by="id">
          <img :src="img.url" :alt="img.name" />
        </div>
      </div>

      <div class="swiper-pagination"></div>
    </div>
    <img :src="swiper" alt="" style="position:absolute;width:100%;bottom:-1px;z-index:100;">
  </div>
</template>

<script>
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.min.css'

  export default{
    data () {
      var data = {}
      data.swiper = './static/img/swiper.png'
      data.images = [
        { 'id': 0, 'url': './static/img/image1.jpg', 'name': 'img1' },
        { 'id': 1, 'url': './static/img/image2.jpg', 'name': 'img2' },
        { 'id': 2, 'url': './static/img/image3.jpg', 'name': 'img3' }
      ]
      return data
    },
    ready () {
      var mySwiper = new Swiper('.swiper-container', {
//        direction: 'vertical',
        loop: true,
        pagination: '.swiper-pagination',
        autoplayDisableOnInteraction: true
      })
      return mySwiper
    }
  }
</script>

<style lang="scss" scoped>
  $height: 4.58rem;
  div.banner{
    position: relative;
    width: 100%;
    height: $height;

    .swiper-container{
      width: 100%;
      height: 100%;
      overflow: hidden;

      .swiper-slide{
        width: 100%;
        height: 100%;
        text-align: center;

        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
